import React, { Component } from 'react';
import { Input, Modal, Form, Icon, Button, message } from 'antd';
import Http from '../../../utils/http';

const FormItem = Form.Item;

class ChangeUser extends Component{
    state={
        visible: false
    }
    showModal = () => {
        this.props.form.setFieldsValue({
            user_name: this.props.name 
          }); 
        this.setState({
          visible: true
        });
      }
    //   用户新增
    handleOk = (e) => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                values['user_id'] = this.props.id
              Http('/user/User/updateUser','post',values)
              .then((res)=>{
                  if(res.code === 200){
                      message.success('用户修改成功！')
                      this.props.http()
                      this.props.form.resetFields()
                  }
                  if(res.code === 500){
                    message.error(res.msg)
                  }
              })
              .catch((err)=>{
                  console.log(err)
              })
              this.setState({
                visible: false,
              });
            }
        })   
      }
    handleCancel = (e) => {
        this.setState({
          visible: false,
        });
      }
    render(){
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form
        return(
            <div className='ChangeUser' style={{display:'inline-block'}}>
                <Button type="default" size='small' onClick={this.showModal} style={{marginRight:'10px'}}>修改</Button>
                <Modal
                title="修改"
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                okText='确认' 
                cancelText= '取消'
                >
                    <Form layout="inline" onSubmit={this.handleSubmit}>
                        <FormItem
                        label='用户名'
                        width='100%'
                        >
                        {getFieldDecorator('user_name', {
                            rules: [{ required: true, message: '请输入用户名!' }],
                        })(
                            <Input  style={{width:350}}/>
                        )}
                        </FormItem>
                        {/* <FormItem
                        >
                        {getFieldDecorator('password', {
                            rules: [{ required: true, message: '请输入用户密码!' }],
                        })(
                            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Password" />
                        )}
                        </FormItem> */}
                    </Form>
                </Modal>
            </div>
        )
    }
}

const ChangeUsers = Form.create()(ChangeUser)
export default ChangeUsers